<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>点击我发送get形式的ajax</button>
    <script>
      /* 发送ajax的时候：会有5种状态的变化，可以通过xhr.readyState来查看
   
*/

      let btn = document.querySelector("button");
      btn.onclick = function () {
        // 发送ajax
        let xhr = new XMLHttpRequest();
        // 如果是IE8 及以下 new ActiveXobject();
        console.log(xhr.readyState); // 初始化了，没有调用open方法 xhr.readyState为0
        xhr.open("get", "/get?name=zhangsan&age=20");
        console.log(xhr.readyState); // open调用了，还没有send xhr.readyState为1
        xhr.send();

        //         xhr.onreadystatechange = function () {
        //           console.log(xhr.readyState);
        //           if(xhr.readyState===4&&xhr.status>=200&&xhr.status<300){
        // console.log('返还成功了',xhr.responseText)

        //           }
        //         };

        xhr.onload = function () {
          // 是 xhr.readyState === 4的简写形式
          if (xhr.status >= 200 && xhr.status < 300) {
            console.log(xhr.readyState);
            console.log(xhr.responseText);
          }
        };
      };
    </script>
  </body>
</html>
